<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pagination 分页</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/local_zn_cn.js"></script>
<style type="text/css">
#components-pagination-demo-mini > .ant-pagination-mini{
	margin-bottom: 24px;
}
</style>
</head>
<body>

<div id="app"><a-config-provider :locale="locale">
	<a-divider class="a-divi" orientation="left">最实用</a-divider><!-- =============================================================== -->
	<p class="desc">自己总结最实用的分页组件。</p>
	<a-pagination v-model:current="data_init.current" :total="data_init.total" v-model:page-Size="data_init.pageSize" show-quick-jumper
		 :show-total="showTotal(total, range)" @change="onChange"></a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">基础分页。</p>
	<a-pagination v-model:current="current1" :total="500" show-less-items></a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">更多</a-divider><!-- =============================================================== -->
	<p class="desc">更多分页。</p>
	<a-pagination v-model:current="current2" :total="500"></a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">改变</a-divider><!-- =============================================================== -->
	<p class="desc">改变每页显示条目数。</p>
	<a-pagination v-model:current="current3" show-size-changer :total="500" @show-Size-Change="onShowSizeChange" v-model:page-Size="pageSize"></a-pagination>
	<br />
	<a-pagination v-model:current="current4" show-size-changer :total="500" @show-Size-Change="onShowSizeChange" disabled></a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">自定义下拉选项</a-divider><!-- =============================================================== -->
	<p class="desc">自定义下拉选项，例如添加全部选项</p>
	<a-pagination v-model:current="current" v-model:page-size="pageSizeRef" :page-size-options="pageSizeOptions"
		:total="total" show-size-changer @show-Size-Change="onShowSizeChange2">
		<template #buildOptionText="props">
			<span v-if="props.value !== '50'">{{ props.value }}条/页</span>
			<span v-else>全部(很明显这个插件没有生效)</span>
		</template>
	</a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">跳转</a-divider><!-- =============================================================== -->
	<p class="desc">快速跳转到某一页。</p>
	<div>
		<a-pagination v-model:current="current6" show-quick-jumper :total="500" @change="onChange"></a-pagination>
		<br />
		<a-pagination v-model:current="current7" show-quick-jumper :total="500" @change="onChange" show-less-items></a-pagination>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">迷你</a-divider><!-- =============================================================== -->
	<p class="desc">迷你版本。</p>
	<div id="components-pagination-demo-mini">
		<a-pagination size="small" :total="50"></a-pagination>
		<a-pagination size="small" :total="50" show-size-changer show-quick-jumper></a-pagination>
		<a-pagination size="small" :total="50" :show-total="total => `共 ${total} 条`"></a-pagination>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">简洁</a-divider><!-- =============================================================== -->
	<p class="desc">简单的翻页。</p>
	<a-pagination v-model:current="current8" simple :total="500" @change="onChange"></a-pagination>
	
	
	<a-divider class="a-divi" orientation="left">总数</a-divider><!-- =============================================================== -->
	<p class="desc">通过设置 showTotal 展示总共有多少数据。</p>
	<div>
		<a-pagination v-model:current="current10" v-model:page-size="pageSize10" :total="85" :show-total="total => `共 ${total} 条`"></a-pagination>
		<br />
		<!-- <a-pagination v-model:current="current11" v-model:page-size="pageSize11" :total="85" :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"></a-pagination> -->
		<a-pagination v-model:current="current11" v-model:page-size="pageSize11" :total="85" :show-total="showTotal(total, range)"></a-pagination>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">上一步和下一步</a-divider><!-- =============================================================== -->
	<p class="desc">修改上一步和下一步为文字链接。</p>
	<a-pagination v-model:current="current12" :total="500" @change="onChange">
		<template #itemRender="{ type, originalElement }">
			<a v-if="type === 'prev'">Previous（这个插槽又是没生效的）</a>
			<a v-else-if="type === 'next'">Next</a>
			<component :is="originalElement" v-else></component>
		</template>
	</a-pagination>
	
	
	
	
</a-config-provider></div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		locale: localeValues,
		data_init: {
			current: 2,
			total: 1000,
			pageSize: 10,
			
		},
		
		current : '2',
		current2 : 6,
		
		current3 : 3,
		current4 : 4,
		pageSize: 20,
		
		pageSizeOptions: ['10', '20', '30', '40', '50', '500'],
		pageSizeRef: 10,
		total: 1000,
		
		current6: 1,
		current7: 1,
		current8: 3,
		
		current10: 1,
		current11: 2,
		pageSize10: 20,
		pageSize11: 20,
		
		current12: 1,
	}
},
computed:{
	// showTotal(){
	// 	return function(total, range){
	// 		return `${range[0]}-${range[1]} of ${total} items`;
	// 		return '88888';
	// 	}
	// }
},
methods:{
	onShowSizeChange(current, pageSize){
		console.log('onShowSizeChange', current, pageSize);
	},
	onShowSizeChange2(current, pageSize){
		console.log('onShowSizeChange2', current, pageSize);
		// this.pageSizeRef = pageSize;		//感觉多余的
	},
	onChange(page, pageSize){
		console.log('onChange: ', page, pageSize);
	},
	
	showTotal(){
		return function(total, range){
			// return `${range[0]}-${range[1]} of ${total} items`;
			return `【第 ${range[0]}-${range[1]} 条，共 ${total} 条】`;
		};
	},
	
},
watch:{
	pageSize:function(value){
		console.log('pageSize', value, this.pageSize);
	},
	current3:function(value){
		console.log('current3', value, this.current3);
	},
}
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
